<template>
  <div class="excel-container">
    <UploadExcel
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    />
  </div>

</template>

<script>
// 一 . 构建 Excel
//    1. 创建 Excel 组件   将导入(UploadExcel) 导出  抽离  分别创建
//    2. 配置跳转的路由信息  views/ImportExcel
//    3. 将子组件 引入 注册 使用到 父组件
//    4. 将 gitee 开源相关源码  复制到 子组件
//          项目地址  https://gitee.com/panjiachen/vue-element-admin
//          预览地址  https://panjiachen.gitee.io/vue-element-admin/#/excel/upload-excel
// 二, 解析文件----把插件解析出来的数据 经过函数的二次转化 变成接口需要的格式
//    1. 将父组件 解析的构造函数  传递给子组件
//    2. 插件解析 Excel 为 js 数据
//        解析前   进行校验  reture 一个布尔值  为fslse  则停止解析
//        解析后   调用函数
// 三, 导入文件
//     1. 调用合适的 js  接口加入到后端数据
//     2. 提交之前  对数据做二次转化处理  [ 使用线成的转化工具]
//     3. 将转化后的数据  传入后端
import UploadExcel from '@/components/UploadExcel'
import { importEmployee } from '@/api/employee'
import { getImportJsData } from '@/utils/excel/excel'
export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
  methods: {
    // 解析前
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1 // 小于1M

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '文件体积不能超过1M',
        type: 'warning'
      })
      return false
    },
    // 解析后
    // 插件吧 excel  解析成一个普通对象数组  和 代表表头的 字符串数组
    async onSuccess({ results, header }) {
      console.log('上传完成', results, header)
      // 调用合适的 js  接口加入到后端数据
      // 提交之前  对数据做二次转化处理  [ 使用线成的转化工具]
      // 将转化后的数据  传入后端
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      const data = getImportJsData(results, headerRelation)
      // 调接口
      await importEmployee(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.excel-container{
  padding:50px;
}
</style>
